<template>
  <!-- 操作列表 -->
  <div>
    <el-dialog
      title="操作列表"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
      destroy-on-close
      :before-close="handleClose"
    >
      <el-form :model="infoModel" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
        <el-form-item>
          <el-transfer
            v-model="targetVal"
            :titles="['隐藏列', '显示列']"
            :button-texts="['到左边', '到右边']"
            :right-default-checked="[1, 2, 3, 4, 5, 6]"
            :data="data"
          ></el-transfer>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" :loading="save_loading" :disabled="save_loading" @click="save">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'editTabled',
  props: {
    showModal: {
      type: Boolean,
      default: false,
    },
  },

  watch: {
    showModal: {
      handler(val) {
        this.dialogVisible = val
      },
      deep: true,
    },

    targetVal: {
      handler(val) {
        console.log(val, '=======')
      },
      deep: true,
    },
  },

  data() {
    return {
      targetVal: ['sku', 'name', 'length', 'category_id', 'status'],
      data: [
        {
          key: 'sku',
          label: 'SKU',
          disabled: true,
        },
        {
          key: 'name',
          label: '产品名称',
          disabled: true,
        },
        {
          key: 'length',
          label: '长宽高 & 重量',
          disabled: true,
        },
        {
          key: 'category_id',
          label: '品类',
          disabled: true,
        },
        {
          key: 'status',
          label: '状态',
          disabled: true,
        },
        {
          key: 'create_time',
          label: '创建时间',
          minWidth: 150,
        },

        {
          key: 'update_time',
          label: '更新时间',
          minWidth: 150,
        },
        {
          key: 'customs_desc',
          label: '描述',
          minWidth: 150,
        },
      ],
      infoModel: {},
      save_loading: false,
      dialogVisible: this.showModal,
    }
  },

  methods: {
    save() {
      this.handleClose('save')
    },

    handleClose(type) {
      this.save_loading = false
      this.dialogVisible = false
      this.$refs.dynamicValidateForm.resetFields()
      if (type == 'save') this.$emit('get-data')
      this.$emit('update:showModal', this.dialogVisible)
    },
  },
}
</script>
